<template>
  <el-dialog
    v-model="store.isVisible"
    :title="t('Select bus message')"
    width="500px"
    @close="store.cancel()"
  >
    <!-- 搜索框 -->
    <el-row :gutter="8" style="align-items: center; margin-bottom: 16px;">
      <el-col :span="24">
        <el-input
          v-model="store.searchKey"
          :placeholder="t('Search...')"
          spellcheck="false"
        />
      </el-col>
    </el-row>

    <el-card>
      <!-- 树形视图 -->
      <el-tree
        ref="treeRef"
        :data="store.treeData"
        :props="{ children: 'children', label: 'name' }"
        node-key="id"
        :highlight-current="true"
        :default-expanded-keys="defaultExpandedKeys"
        style="height: 400px; overflow-y: auto;"
        @node-click="(data, node) => handleNodeClick(data, node)"
      >
        <template #default="{ node, data }">
          <span 
            :style="{ 
              color: data.exist === true ? 'var(--el-color-success)' : data.exist === false ? 'var(--el-color-primary)' : 'inherit',
              userSelect: 'none'
            }"
          >
            {{ data.name }}
          </span>
        </template>
      </el-tree>
    </el-card>

    <template #footer>
      <el-button 
        type="danger" 
        @click="store.deleteMessage"
        :disabled="!store.showDeleteButton"
        v-if="store.showDeleteButton">
        {{ t('Delete') }}
      </el-button>
      <el-button 
        type="primary" 
        @click="() => handleConfirm()"
        :disabled="isConfirmDisabled">
        {{ t('OK') }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useBusMessageChooserStore } from '@/stores/busMessageChooser'
import { useLanguageStore } from '@/stores/language'
import { ref, computed } from 'vue'

const store = useBusMessageChooserStore()
const languageStore = useLanguageStore()
const treeRef = ref(null)

let clickCount = 0
let clickTimer = null

// 翻译函数
const t = (key) => {
  const translations = {
    'Select bus message': {
      'en': 'Select bus message',
      'zh': '选择总线报文'
    },
    'Search...': {
      'en': 'Search...',
      'zh': '搜索...'
    },
    'Delete': {
      'en': 'Delete',
      'zh': '删除'
    },
    'OK': {
      'en': 'OK',
      'zh': '确认'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

const defaultExpandedKeys = computed(() => {
  const expandedKeys = []
  
  function collectExpandedKeys(nodes) {
    for (const node of nodes) {
      if (node.expandChildren === true) {
        expandedKeys.push(node.id)
      }
      if (node.children && node.children.length > 0) {
        collectExpandedKeys(node.children)
      }
    }
  }
  
  collectExpandedKeys(store.treeData)
  return expandedKeys
})

const isConfirmDisabled = computed(() => {
  const currentNode = treeRef.value?.getCurrentNode()
  return !currentNode || 
         (currentNode.children && currentNode.children.length > 0)
})

function handleNodeClick(data, node) {
  clickCount++
  if (clickCount === 1) {
    clickTimer = setTimeout(() => {
      clickCount = 0
    }, 300)
  } else if (clickCount === 2) {
    clearTimeout(clickTimer)
    clickCount = 0
    if (!isConfirmDisabled.value) handleConfirm(data, node)
  }
}

function handleConfirm(data, node) {
  const currentNode = data || treeRef.value?.getCurrentNode()
  if (currentNode && !currentNode.children) {
    store.confirm(currentNode)
  }
}
</script>
